import React, { useState, useEffect } from 'react';
import { Button, Input, Select, Tree, Table } from 'antd';
import {
  DownOutlined,
  CarryOutOutlined,
  CheckOutlined,
  FormOutlined,
} from '@ant-design/icons';
import { Resizable } from 'react-resizable';
import './index.less';

export default function index() {
  //  选择省份下拉框改变事件
  const provinceChange = () => {};
  // 选择供应商行业 下拉框改变事件
  const insdutryChange = () => {};

  // 供应商列表左侧展示信息
  const treeData = [
    {
      title: '汽车行业',
      value: '汽车行业',
      key: '0-0',
      icon: <CarryOutOutlined />,
      children: [
        {
          title: '原料供应商',
          value: '原料供应商',
        },
        {
          title: '零部件供应商',
          value: '零部件供应商',
        },
        {
          title: '汽车制造商',
          value: '汽车制造商',
        },
      ],
    },
    {
      title: '医疗行业',
      value: '医疗行业',
      children: [
        {
          title: '医疗材料供应商',
          value: '医疗材料供应商',
        },
        {
          title: '医疗设备供应商',
          value: '医疗设备供应商',
        },
      ],
    },
    {
      title: '工程行业',
      value: '工程行业',
      children: [
        {
          title: '工程材料供应商',
          value: '工程材料供应商',
        },
        {
          title: '工程设备供应商',
          value: '工程设备供应商',
        },
      ],
    },
    {
      title: '电子行业',
      value: '电子行业',
      children: [
        {
          title: '电子材料供应商',
          value: '电子材料供应商',
        },
        {
          title: '电子设备供应商',
          value: '电子设备供应商',
        },
      ],
    },
    {
      title: '食品行业',
      value: '食品行业',
      children: [
        {
          title: '食品材料供应商',
          value: '食品材料供应商',
        },
        {
          title: '食品添加剂供应商',
          value: '食品添加剂供应商',
        },
        {
          title: '食品包装材料供应商',
          value: '食品包装材料供应商',
        },
        {
          title: '食品成品供应商',
          value: '食品成品供应商',
        },
      ],
    },
  ];

  // 左侧树 选择时触发事件
  const treeSelect = (selectedKeys, info) => {
    console.log(selectedKeys, info);
  };

  // 表格列 及数据
  const defaultColumns = [
    {
      title: '序号',
      dataIndex: 'num',
      width: 50,
      ellipsis: true,
    },
    {
      title: '供应商编号',
      dataIndex: 'scode',
      width: 100,
      ellipsis: true,
    },
    {
      title: '供应商名称',
      dataIndex: 'sname',
      width: 150,
      ellipsis: true,
    },
    {
      title: '供应商等级',
      dataIndex: 'sgrade',
      width: 100,
      ellipsis: true,
    },
    {
      title: '所在省份',
      dataIndex: 'province',
      width: 100,
      ellipsis: true,
    },
    {
      title: '所在市区',
      dataIndex: 'city',
      width: 100,
      ellipsis: true,
    },
    {
      title: '供应商类别',
      dataIndex: 'sclass',
      width: 100,
      ellipsis: true,
    },
    {
      title: '所属行业',
      dataIndex: 'trade',
      width: 100,
      ellipsis: true,
    },
    {
      title: '联系人',
      dataIndex: 'contacts',
      width: 100,
      ellipsis: true,
    },
    {
      title: '部门',
      dataIndex: 'depart',
      width: 100,
      ellipsis: true,
    },
    {
      title: '职位',
      dataIndex: 'post',
      width: 100,
      ellipsis: true,
    },
    {
      title: '办公电话',
      dataIndex: 'offphone',
      width: 100,
      ellipsis: true,
    },
    {
      title: '手机号码',
      dataIndex: 'phone',
      width: 100,
      ellipsis: true,
    },
    {
      title: '',
      dataIndex: '',
      width: 100,
      ellipsis: true,
      render: () => <a>关联详情</a>,
    },
    {
      title: '操作',
      dataIndex: '',
      ellipsis: true,
    },
  ];

  const data = [];
  for (let i = 0; i < 46; i++) {
    data.push({
      _id: i,
      num: i + 1,
      scode: `03000${i + 1}`,
      sname: `江苏苏凌化工有限公司${i}`,
      sgrade: '一级供应商',
      province: '江苏省',
      city: '连云港市',
      sclass: '工程材料供应商',
      trade: '医疗行业',
      contacts: '杨彪',
      depart: '销售部',
      post: '销售部经理',
      offphone: '6643223',
      phone: '1562342343',
    });
  }

  // 表格拖拽重新配置列
  const [dcolumns, setDcolumns] = useState([]);
  const [components, setComponents] = useState({});
  const [total, settotal] = useState(0);
  // 表格多选框
  const [selectArray, setSelectArray] = useState([]);

  // 多选框回调
  const handleSelectTableRow = (data, data2, { type }) => {
    console.log(data, data2, { type });
    setSelectArray([data[data.length - 1]]);
  };

  // 单选表格行按钮
  const selectRow = (record) => {
    setSelectArray([record]);
  };

  useEffect(() => {
    setDcolumns(defaultColumns);
    setComponents({
      header: {
        cell: ResizeableTitle,
      },
    });
  }, []);

  const ResizeableTitle = (props) => {
    const { onResize, width = 100, ...restProps } = props;
    if (!width) {
      return <th {...restProps} />;
    }

    return (
      <Resizable width={width} height={0} onResize={onResize}>
        <th {...restProps} />
      </Resizable>
    );
  };
  const handleResize =
    (index) =>
    (e, { size }) => {
      const nextColumns = [...columns];
      nextColumns[index] = {
        ...nextColumns[index],
        width: size.width,
      };
      setDcolumns(nextColumns);
    };

  const columns = dcolumns.map((col, index) => ({
    ...col,
    onHeaderCell: (column) => ({
      width: col.width * 1 || 100, // 100 没有设置宽度可以在此写死 例如100试下
      onResize: handleResize(index),
    }),
  }));

  // table表格配置项
  const tableProps = {
    rowKey: '_id',
    bordered: true, // 是否设置边框
    // loading: loading, // 加载效果
    size: 'small', // 表格尺寸
    rowSelection: {
      // 多选框配置
      columnTitle: ' ',
      selectedRowKeys: selectArray,
      onChange: handleSelectTableRow,
    },
    onRow: (r) => {
      return {
        onClick: () => selectRow(r._id), // 点击行
        onDoubleClick: (event) => {},
      };
    },
    scroll: {
      // 表格xy轴适应
      y: 330,
      x: 1000,
    },
    pagination: {
      // 表格自带分页器配置
      position: ['none', 'none'],
    },
    expandIconAsCell: false, // 展开列图标显示配置
    expandIconColumnIndex: -1, // 展开列位置设置
  };

  return (
    <div className="suplist">
      <div className="topnav">
        <button className="my-btn">新增</button>
        <button className="my-btn">修改</button>
        <button className="my-btn">删除</button>
        <button className="my-btn">过滤</button>
        <button className="my-btn">还原</button>
        <button className="my-btn">打印</button>
        <button className="my-btn">导入</button>
        <button className="my-btn">导出</button>
        <button className="my-btn">查看日志</button>
      </div>
      <div className="body">
        供应商编号：
        <Input
          style={{ width: '165px', height: '28px', marginRight: '15px' }}
        />
        供应商名称：
        <Input
          style={{ width: '165px', height: '28px', marginRight: '15px' }}
        />
        所在省份：
        <Select
          defaultValue="全部"
          style={{ width: '165px', height: '28px', marginRight: '15px' }}
          onChange={provinceChange}
          options={[
            {
              value: '全部',
              label: '全部',
            },
            {
              value: '北京',
              label: '北京',
            },
            {
              value: '河北',
              label: '河北',
            },
            {
              value: '天津',
              label: '天津',
            },
          ]}
        />
        所在市区：
        <Input
          style={{ width: '165px', height: '28px', marginRight: '15px' }}
        />
        供应商行业：
        <Select
          defaultValue="全部"
          style={{ width: '165px', height: '28px', marginRight: '15px' }}
          onChange={insdutryChange}
          options={[
            {
              value: '全部',
              label: '全部',
            },
            {
              value: '汽车行业',
              label: '汽车行业',
            },
            {
              value: '医疗行业',
              label: '医疗行业',
            },
            {
              value: '工程行业',
              label: '工程行业',
            },
            {
              value: '电子行业',
              label: '电子行业',
            },
            {
              value: '食品行业',
              label: '食品行业',
            },
          ]}
        />
        办公电话：
        <Input
          style={{ width: '165px', height: '28px', marginRight: '15px' }}
        />
        手机：
        <Input
          style={{ width: '165px', height: '28px', marginRight: '15px' }}
        />
        主联系人：
        <Input
          style={{
            width: '165px',
            height: '28px',
            marginRight: '15px',
            marginTop: '15px',
          }}
        />
        <button className="my-btn">查询</button>
        <h2 style={{ textAlign: 'center', marginTop: '20px' }}>供应商列表</h2>
        <div className="suptab">
          <div className="lefttree">
            <Tree
              showLine
              // switcherIcon={<DownOutlined />}
              // switcherIcon={}
              defaultExpandAll
              onSelect={treeSelect}
              treeData={treeData}
            />
          </div>
          <div className="righttab">
            {/* 表格 */}
            <Table
              rowKey={'_id'}
              columns={columns}
              {...tableProps}
              dataSource={data}
              components={components}
            ></Table>

            {/* 分页 */}
            <div className="home_fy" style={{}}>
              <div className="home_fy_left">
                <svg
                  t="1675319740940"
                  className="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="7074"
                  width="20"
                  height="20"
                >
                  <path
                    d="M872.533 819.627a34.133 34.133 0 0 1-48.213 48.213L492.373 535.893a34.133 34.133 0 0 1 0-48.213L824.32 155.733a34.133 34.133 0 0 1 48.213 48.214L564.907 512z m-341.333 0a34.133 34.133 0 0 1-48.213 48.213l-331.52-331.52a34.133 34.133 0 0 1 0-48.213L483.413 156.16a34.133 34.133 0 0 1 48.214 48.213L223.573 512z"
                    fill="#333333"
                    p-id="7075"
                  ></path>
                </svg>
                <svg
                  t="1675319795515"
                  className="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="7214"
                  width="20"
                  height="20"
                >
                  <path
                    d="M677.391515 873.916768c-7.86101 0-15.618586-2.999596-21.617778-8.895354L324.473535 533.721212c-11.998384-11.894949-11.998384-31.340606 0-43.235555L655.670303 159.288889c5.999192-5.999192 13.756768-8.895354 21.617778-8.895354 7.757576 0 15.618586 2.999596 21.617778 8.895354 11.894949 11.894949 11.894949 31.237172 0 43.235555L389.223434 512.103434 698.905859 821.785859c11.894949 11.998384 11.894949 31.340606 0 43.235555-5.895758 5.895758-13.756768 8.895354-21.514344 8.895354z m0 0"
                    fill="#666666"
                    p-id="7215"
                  ></path>
                </svg>
                <svg
                  t="1675319856049"
                  className="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="7882"
                  width="20"
                  height="20"
                >
                  <path
                    d="M531.185456 943.532317c0 8.899694-6.493901 16.114003-14.503319 16.114003l-9.364275 0c-8.010441 0-14.504342-7.214309-14.504342-16.114003L492.81352 80.46666c0-8.898671 6.493901-16.114003 14.504342-16.114003l9.364275 0c8.009418 0 14.503319 7.215332 14.503319 16.114003L531.185456 943.532317z"
                    p-id="7883"
                  ></path>
                </svg>
                <span style={{ marginRight: '10px' }}>第</span>
                <input
                  style={{ marginRight: '10px' }}
                  type="text"
                  defaultValue="1"
                />
                <span style={{ marginRight: '5px' }}>页，共</span>
                <span style={{ marginRight: '5px' }}>1</span>
                <span>页</span>
                <svg
                  t="1675319856049"
                  className="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="7882"
                  width="20"
                  height="20"
                >
                  <path
                    d="M531.185456 943.532317c0 8.899694-6.493901 16.114003-14.503319 16.114003l-9.364275 0c-8.010441 0-14.504342-7.214309-14.504342-16.114003L492.81352 80.46666c0-8.898671 6.493901-16.114003 14.504342-16.114003l9.364275 0c8.009418 0 14.503319 7.215332 14.503319 16.114003L531.185456 943.532317z"
                    p-id="7883"
                  ></path>
                </svg>
                <svg
                  t="1675320084570"
                  className="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="11159"
                  width="20"
                  height="20"
                >
                  <path
                    d="M151.467 204.373a34.133 34.133 0 1 1 48.213-48.213l331.947 331.947a34.133 34.133 0 0 1 0 48.213L199.68 867.84a34.133 34.133 0 1 1-48.213-48.213L459.093 512z m341.333 0a34.133 34.133 0 0 1 48.213-48.213L872.96 488.107a34.133 34.133 0 0 1 0 48.213L541.013 868.267a34.133 34.133 0 0 1-48.213-48.214L800.427 512z"
                    fill="#333333"
                    p-id="11160"
                  ></path>
                </svg>
                <svg
                  t="1675320111791"
                  className="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="12072"
                  width="20"
                  height="20"
                >
                  <path
                    d="M386.640017 196.405191 687.536947 487.723004c13.840827 13.408717 13.840827 35.135036 0 48.543753s-36.293132 13.408717-50.156485 0L336.483532 244.948944c-13.840827-13.408717-13.840827-35.135036 0-48.543753S372.777687 182.996474 386.640017 196.405191z"
                    fill="#879196"
                    p-id="12073"
                  ></path>
                  <path
                    d="M336.483532 779.073583l300.895906-291.351603c13.863354-13.408717 36.316683-13.408717 50.156485 0 13.840827 13.408717 13.840827 35.135036 0 48.543753L386.640017 827.617336c-13.863354 13.408717-36.316683 13.408717-50.156485 0S322.642705 792.437246 336.483532 779.073583z"
                    fill="#879196"
                    p-id="12074"
                  ></path>
                </svg>
              </div>
              <div className="home_fy_right">
                显示
                <span>1-{total}</span>
                条，共<span>{total}</span>条
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
